<template>
    <div class="base">
        <Header></Header>
        <el-container>
            <el-aside>
                <el-menu default-active="1" router>
                    <div class="div">个人中心</div>
                    <el-menu-item index="/user/wddd1">
                        我的订单<b></b>
                    </el-menu-item>
                    <el-menu-item index="/user/wddd2">我的优惠券<b></b></el-menu-item>
                    <el-menu-item index="/user/wddd3">我的魔力值<b></b></el-menu-item>
                    <el-menu-item index="/user/wddd4">想看的演出<b></b></el-menu-item>
                    <el-menu-item index="/user/wddd5">地址管理<b></b></el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <router-view />
            </el-main>
        </el-container>
        <Footer></Footer>
    </div>
</template>

<script>
import Header from '@/components/Header.vue';
import Footer from '@/components/Footer.vue';
export default {
    components: { Header, Footer },

}
</script>

<style lang="scss" scoped>
.base {
    width: 1160px;
    height: 740px;
    margin: auto;
}

.el-aside {
    width: 204px !important;
}

.el-menu {
    background-color: #fff;
    box-sizing: border-box;
    float: left;
    // width: 204px;
    height: 700px;
    padding: 0 0 0 40px;
    border: 1px solid #eaeaea;
    margin: 20px 0;

    >.div {
        font-size: 26px;
        color: #282828;
        height: 100px;
        line-height: 100px;
    }
}

.el-menu-item {
    margin-bottom: 30px;
    width: 162px;
    color: #323038;
    cursor: pointer;
    font-size: 17px;
    background-color: transparent !important;
}

.el-menu-item.is-active {
    color: #ff4655;

    >b {
        position: absolute;
        display: block;
        width: 5px;
        height: 20px;
        background-color: #ff4655;
        left: -40px;
        top: 20px;
    }
}
</style>